主题和样式系统

在现代前端开发中，样式和主题系统是构建用户界面时不可或缺的部分。React 提供了多种方式来管理和应用样式，从简单的内联样式到复杂的 CSS-in-JS 解决方案。本教程将详细介绍如何在 React 应用中实现主题和样式系统，并提供代码示例和实践练习。

1. 样式基础

1.1 内联样式

内联样式是最简单的样式应用方式，直接在 JSX 元素中使用 style 属性。

function App() {
  return (
    <div style={{ color: 'blue', fontSize: '20px' }}>
      Hello, World!
    </div>
  );
}

1.2 CSS 文件

传统的 CSS 文件可以通过 className 属性应用到 JSX 元素上。

// App.css
.title {
  color: green;
  font-size: 24px;
}

// App.js
import './App.css';

function App() {
  return (
    <div className="title">
      Hello, World!
    </div>
  );
}

1.3 CSS Modules

CSS Modules 允许你将 CSS 文件模块化，避免全局样式冲突。

// App.module.css
.title {
  color: red;
  font-size: 24px;
}

// App.js
import styles from './App.module.css';

function App() {
  return (
    <div className={styles.title}>
      Hello, World!
    </div>
  );
}

2. CSS-in-JS

CSS-in-JS 是一种将样式直接写在 JavaScript 文件中的技术，常见的库有 styled-components 和 emotion。

2.1 styled-components

styled-components 是一个流行的 CSS-in-JS 库，它允许你使用模板字符串来定义样式。

import styled from 'styled-components';

const Title = styled.h1`
  color: purple;
  font-size: 32px;
`;

function App() {
  return (
    <Title>
      Hello, World!
    </Title>
  );
}

2.2 emotion

emotion 是另一个强大的 CSS-in-JS 库，支持多种样式定义方式。

import { css } from '@emotion/react';

const titleStyle = css`
  color: orange;
  font-size: 32px;
`;

function App() {
  return (
    <h1 css={titleStyle}>
      Hello, World!
    </h1>
  );
}

3. 主题系统

主题系统允许你在应用中切换不同的样式主题，如亮色主题和暗色主题。

3.1 使用 Context API

你可以使用 React 的 Context API 来管理主题。

// ThemeContext.js
import React, { createContext, useState } from 'react';

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

// App.js
import React, { useContext } from 'react';
import { ThemeProvider, ThemeContext } from './ThemeContext';

const App = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ backgroundColor: theme === 'light' ? 'white' : 'black', color: theme === 'light' ? 'black' : 'white' }}>
      <h1>Hello, World!</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

const Root = () => (
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

export default Root;

3.2 使用 styled-components 的主题功能

styled-components 提供了内置的主题功能，可以轻松切换主题。

import styled, { ThemeProvider } from 'styled-components';

const lightTheme = {
  background: 'white',
  color: 'black',
};

const darkTheme = {
  background: 'black',
  color: 'white',
};

const Title = styled.h1`
  background-color: ${props => props.theme.background};
  color: ${props => props.theme.color};
`;

function App() {
  const [theme, setTheme] = useState(lightTheme);

  const toggleTheme = () => {
    setTheme(theme === lightTheme ? darkTheme : lightTheme);
  };

  return (
    <ThemeProvider theme={theme}>
      <Title>Hello, World!</Title>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </ThemeProvider>
  );
}

4. 实践练习

4.1 创建一个简单的主题切换应用

1. 使用 styled-components 创建一个简单的应用，包含一个标题和一个按钮。
2. 实现主题切换功能，当点击按钮时，切换应用的背景色和文字颜色。

4.2 使用 Context API 管理主题

1. 创建一个 ThemeContext，包含亮色和暗色主题。
2. 在应用中使用 ThemeContext 来切换主题，并应用不同的样式。

5. 总结

通过本教程，你学习了如何在 React 应用中管理和应用样式，包括内联样式、CSS 文件、CSS Modules、CSS-in-JS 以及主题系统。这些技术可以帮助你构建灵活、可维护的用户界面。继续探索和实践，你将能够创建更加复杂和美观的 React 应用。